<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Very Basic place5 Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
.my-placeholder-class {
    color: blue;
}
.placeholder-showing {
    color: #ccc;
}
</style>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type='text/javascript' src='place5.js'></script>
<script type='text/javascript'>
jQuery(function($) {

    display("jQuery version: " + $.fn.jquery);
    display("place5 version: " + $.fn.placeholder.version);
    display("Support is native? " + $.placeholderNativeSupport);
    $(".p1").placeholder();
    $(".p2").placeholder({className: "my-placeholder-class"});
    $(".p3").placeholder().click(function() {
        $(this).placeholder("destroy").unbind("click");
    });
    $(".p4").placeholder({override: true});
    $(".p5").placeholder({override: true, className: "my-placeholder-class"});
    try {
        $(".p6").placeholder({override: true});
        display("ERROR: Should have thrown an exception.");
    }
    catch (e) {
        display("Exception on .p6: " + e + " (intentional)");
    }

    function display(msg) {
        $("<p>").html(msg).appendTo(document.body);
    }
	$(".p7").placeholder();
	$(".p8").placeholder({override: true});
});
</script>
</head>
<body>
<input     type='text' class="p1" size="60" placeholder="(p1) placeholder defaults 1">
<br><input type='text' class="p1" size="60" placeholder="(p1) placeholder defaults 1">
<br><input type='text' class="p2" size="60" placeholder="(p2) placeholder class override 1">
<br><input type='text' class="p2" size="60" placeholder="(p2) placeholder class override 2">
<br><input type='text' class="p3" size="60" placeholder="(p3) placeholder, destroy on click 1">
<br><input type='text' class="p3" size="60" placeholder="(p3) placeholder, destroy on click 2">
<br><input type='text' class="p4" size="60" placeholder="(p4 - override, default class) text field 7 placeholder">
<br><input type='text' class="p5" size="60" placeholder="(p5 - override, custom class) text field 8 placeholder">
<br><input type='text' class="p6" size="60" value="(p6) text field 9 NO placeholder attribute">
<br><textarea class="p7" cols="60" rows="5" placeholder="(p7) placeholder in a text area"></textarea>
<br><textarea class="p8" cols="60" rows="5" placeholder="(p8 - override) placeholder in a text area"></textarea>
</body>
</html>